// 定义1像素问题 可以传参，参数通过$开头的变量表示
// 因为有的设备不识别0.5px所以需要做一个兼容
@mixin border_1px($color) {
    position: relative;
    // 当检测到像素比为1.5的时候，使用这中方式 一般像素比有1.5、有2、有3
    @media(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5) {
        // 这里的&代表父选择器，其实就是代表使用此class的选择器选中的元素
        &::before{
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            background-color: $color;
            width: 100%;
            height: 1px;
            transform: scaleY(0.667);
        }
    }

    @media(-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2) {
        // 这里的&代表父选择器，其实就是代表使用此class的选择器选中的元素
        &::before{
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            background-color: $color;
            width: 100%;
            height: 1px;
            transform: scaleY(0.5);
        }
    }

    @media(-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3) {
        // 这里的&代表父选择器，其实就是代表使用此class的选择器选中的元素
        &::before{
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            background-color: $color;
            width: 100%;
            height: 1px;
            transform: scaleY(0.333);
        }
    }
}